<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Yuan | City</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="../css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
    <link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link rel="stylesheet" href="../css/susu.css" type="text/css">
    <!-- Js Plugins -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/jquery.countdown.min.js"></script>
    <script src="../js/jquery.nice-select.min.js"></script>
    <script src="../js/jquery.zoom.min.js"></script>
    <script src="../js/jquery.dd.min.js"></script>
    <script src="../js/jquery.slicknav.js"></script>
    <script src="../js/owl.carousel.min.js"></script>
    <!--评论-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <style>
        input,
        button {
            outline: none !important;
        }

        .btn {
            border-radius: 0;
        }

        .le-text {
            color: #c50e1b;
        }

        .le-goods-details {
            margin-top: 60px;
        }

        .thumbnail {
            max-width: 420px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 0;
        }

        .thumbnail:hover {
            border-color: #c50e1b;
        }


        .thumbnail img {
            width: 100%;
        }

        .le-goods-tilte-small {
            font-size: 12px;
        }

        .jumbotron {
            border-radius: 0 !important;
            padding: 15px !important;

        }

        .jumbotron .list-inline {
            margin: 0;
        }

        .jumbotron .list-inline li {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
        }

        .jumbotron .list-inline li:first-child {
            width: 70px;
            color: #999;
        }


        .le-price {
            font-size: 18px;
            font-weight: 700;
            color: #c50e1b;
        }

        .le-icon span {
            padding: 2px 4px;
            line-height: 36px;
            font-size: 12px;
            border: 1px solid #e3e4e5;
        }

        .le-icon span.le-icon-red {
            color: #C50E1B;
            border-color: #C50E1B;
        }

        .le-icon span.le-icon-yellow {
            color: #cfae68;
            border-color: #cfae68;
        }

        .le-icon span.le-icon-primary {
            color: #646fb0;
            border-color: #646fb0;
        }

        .le-sales {
            padding: 5px 10px;
            border-left: 1px solid #cbcbcb;
            font-size: 12px;
        }

        dl.dl-horizontal dt {
            width: 60px;
            color: #666;
        }

        dl.dl-horizontal dd {
            margin-left: 100px;
            font-size: 13px;
        }

        dl.dl-horizontal dd li a {
            padding: 1px 2px;
            color: #C50E1B;
            border: 1px solid #C50E1B;
        }

        .le-top-ad {
            margin-top: -10px;
            height: 120px;
            background-image: url(../imag/ad.jpg);
            background-position: center;
            background-size: cover;
        }

        .le-footter ul {
            margin-bottom: 20px;
        }

        .le-footter h4 {
            display: inline-block;
            padding-right: 20px;
            margin-bottom: 10px;
            font-size: 14px;
            color: #C50E1B;
            border-bottom: 3px solid #C50E1B;
        }

        .le-footter li a {
            font-size: 13px;
            color: #333;
        }

        .le-footter li:hover a {
            color: #c50e1b;
        }


        .le-describe h4 {
            padding-bottom: 10px;
            border-bottom: 2px solid #C50E1B;
            margin-bottom: 30px;
            text-align: center;
        }

        .le-describe p {
            font-size: 13px;
        }

        .nav{display:-ms-flexbox;
            display:flex;
            -ms-flex-wrap:wrap;
            flex-wrap:wrap;
            padding-left:0;
            margin-bottom:0;
            list-style:none}
    </style>
</head>
<!--头部引入-->
<div class="su_head ">
</div>

<br />

<div class="le-top-ad hidden-xs hidden-sm" >
    <button class="close">&times;</button>
</div>
<!--内容-->

<div class="container le-goods-details" >

    <div class="col-md-4">
        <div class="thumbnail">
            <img id="le-goods-url"
                 src="https://img10.360buyimg.com/n7/jfs/t1/183864/21/21088/194098/61275df4E546b4a93/793da088a6861a82.jpg">
        </div>
    </div>

    <div class="col-md-8">
        <h4 class="le-goods-title" id="le-goods-title">
            <span id="le-goods-gid" class="hidden"></span>
        </h4>
        <p class="le-text le-goods-tilte-small">【会员专属】0元入会领专属优惠券,1元试用正装！ 【先储值后购物】至高享充值3000元送400元！</p>
        <p class="le-text le-goods-tilte-small">【好评抽奖】评价抽奖享更多惊喜好礼！点击 <a href="">查看&gt;</a></p>

        <div class="jumbotron">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-10">
                        <ul class="list-inline">
                            <li id="jiage">价 格</li>
                            <li><span class="le-price">￥<span id="le-goods-price"></span></span></li>
                        </ul>
                        <ul class="list-inline hidden" id="infoContent1">
                            <li>内 容</li>
                            <li><span  id="infoContent2"></span></li>
                        </ul>
                        <ul class="list-inline le-icon" id="infoContent3">
                            <li>促 销</li>
                            <li><span class="le-icon-red">满减</span></li>
                            <li><span class="le-icon-red">换购</span></li>
                            <li><span class="le-icon-yellow">PLUS限购</span></li>
                            <li><span class="le-icon-primary">满额返券</span></li>
                        </ul>
                    </div>
                    <div class="col-md-2 hidden-xs hidden-sm hidden-md">
                        <div class="le-sales">
                            累计销量<br><a href="">100万+</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 配送 -->

        <dl class="dl-horizontal hidden-xs hidden-sm">
            <dt id="peisongzhi">配送至</dt>
            <dd>
                <ul class="list-inline">
                    <li><a href="" style="border: none; color: #000;" id="address">四川成都 <b>有货</b></a></li>
                </ul>
            </dd>

            <dt class="supporttitle">支持</dt>
            <dd>
                <ul class="list-inline supporttitle" >
                    <li><a href="">配送港澳台</a></li>
                    <li><a href="">99元免运费</a></li>
                    <li><a href="">破损包退换</a></li>
                    <li><a href="">7天无理由</a></li>
                    <li><a href="">正品保障</a></li>
                </ul>
            </dd>

            <dt id="deliverytime">发货时间</dt>
            <dd>
                <ul class="list-inline">
                    <li style="color: #646fb0;" id="deliverycontent">现在购买即可享受售后服务保障 18:00 前下单 预计后天送达。</li>
                </ul>
            </dd>
        </dl>

        <!-- 按钮 -->
        <div class="pd-share" style="margin-top: 25px;">
<!--            <a class="btn btn-warning  btn-lg" style="size: 100px;" href="/city/v1/pay/alipay" id="buyInfos"><span style="color: white;">购买服务</span></a>-->
            <button class="btn btn-warning  btn-lg" style="size: 100px;" href="/city/v1/pay/alipay" onclick="buyInfos()"><span style="color: white;">购买服务</span></button>
            <button class="btn btn-success  btn-lg" style="size: 100px;" onclick="addcart()">加入收藏</button>
        </div>
    </div>

</div>
</div>

<!--评价-->
<div class="container-fluid  hidden-xs hidden-sm" style=" margin-top: 20px;padding: 50px;">
<h4 style=" padding-bottom: 10px;
            border-bottom: 2px solid #C50E1B;
            margin-bottom: -8px;
            font-size: 18px;
            text-align: center;">用户体验</h4>
<section class="product-shop spad page-details">
<div class="container">
    <div class="row ">
        <div class="col-lg-12">
    <div class="product-tab ">
        <div class="tab-item ">
            <ul class="nav" role="tablist">
                <li >
                    <a  onclick="xz1()" class="active" data-toggle="tab" href="#tab-1" role="tab">累计评价</a>
                </li>
                <li>
                    <a onclick="xz2()"  data-toggle="tab" href="#tab-2" role="tab">服务详情</a>
                </li>
                <li>
                    <a  onclick="xz3()" data-toggle="tab" href="#tab-3" role="tab">交易保障</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#tab-3" role="tab">&nbsp;&nbsp;&nbsp;</a>
                </li>
            </ul>
        </div>
        <div class="tab-item-content">
            <div class="tab-content">
                <div class="tab-pane fade-in active" id="tab-1" role="tabpanel">
                    <div class="product-content">
                        <div class="row">
                            <div  id="switch" class="col-lg-12 col-md-12">
                                <!-- 评论  -->
                                <div id="plun"style="margin-left: 30px; display: block;">
                                    <div id="waypoint" class="m-margin- animated fadeIn">
                                        <div class="ui container m-opacity box-shadow-max">
<!--                                            <div  class="ui bottom attached segment">-->
                                            <div  class="">
                                                <!--评论区域列表-->
                                                <div id="comment-container"  class="ui teal segment">
                                                    <div th:fragment="commentList">
                                                        <div class="ui threaded comments" style="max-width: 100%;">
                                                            <h3 class="ui dividing header">评论</h3>
                                                            <div class="comment" th:each="comment : ${comments}">
                                                                <a class="avatar">
                                                                    <img src="../../image/a.png" th:src="@{${comment.avatar}}">
                                                                </a>
                                                                <div class="content">
                                                                    <a class="author" >
                                                                        <span th:text="${comment.nickname}">小红</span>
                                                                    </a>
                                                                    <div class="metadata">
                                                                        <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                                                    </div>
                                                                    <div class="text" th:text="${comment.content}">
                                                                        愿你走出半生，归来仍是少年！
                                                                    </div>
                                                                    <div class="actions">
                                                                        <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                                                                    </div>
                                                                </div>
                                                                <!--子集评论-->
                                                                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                                                    <div class="comment" th:each="reply : ${comment.replyComments}">
                                                                        <a class="avatar">
                                                                            <img src="../../image/a.png" th:src="@{${reply.avatar}}">
                                                                        </a>
                                                                        <div class="content">
                                                                            <a class="author" >
                                                                                <span th:text="${reply.nickname}">小白</span>
                                                                                &nbsp;<span th:text="|@ ${reply.parentCommentName}|" class="m-teal">@ 小红</span>
                                                                            </a>
                                                                            <div class="metadata">
                                                                                <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                                                            </div>
                                                                            <div class="text" th:text="${reply.content}">
                                                                                你也是！
                                                                            </div>
                                                                            <div class="actions">
                                                                                <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="comment-form" class="ui form">
                                                    <input type="hidden" name="parentComment.id" value="-1">
                                                    <div class="field">
                                                        <textarea name="content" placeholder="请输入评论信息..."></textarea>
                                                    </div>
                                                    <div class="fields">
                                                        <div class="field m-mobile-wide m-margin-bottom-small">
                                                            <div class="ui left icon input">
                                                                <i class="user icon"></i>
<!--                                                                <input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}">-->
                                                                <input type="text"  id="nicknamecomment" name="nickname" placeholder="姓名"  value="">
                                                            </div>
                                                        </div>
                                                        <div class="field m-mobile-wide m-margin-bottom-small">
                                                            <div class="ui left icon input">
                                                                <i class="mail icon"></i>
<!--                                                                <input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}">-->
                                                                <input type="text" id="emailcomment" name="email" placeholder="邮箱" value="">
                                                            </div>
                                                        </div>
                                                        <div class="field  m-margin-bottom-small m-mobile-wide">
                                                            <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>



                                <!--服务详情-->
                                <div id="fuwu" style="display: none;">
                                    <p>

                                        服务详情板块正在开发 。。。。。。。。。。</br>

                                    </p>
                                </div>

                               </div>
                            <!--服务保障-->
                            <div id="baozhang" style="display: none;height: 336px;width: 849px;">
                                <img src="#" >
                            </div>


                        </div>
                        <div class="col-lg-5">
                            <!-- <img src="" alt=""> -->
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
        </div>
    </div>
</div>
</section>
</div>

<!-- Footer Section Begin -->
<footer class="footer-section">
    <div class="copyright-reserved container">
        <div class="row">
            <div class="col-lg-12">
                <div class="copyright-text" style="text-align: center;">
                    Copyright &copy;<script>document.write(new Date().getFullYear());</script> Yuan City
                </div>
            </div>

        </div>
    </div>

</footer>
<!-- Footer Section End -->

</body>
<script type="text/javascript">
    document.querySelector('.close').onclick = function () {
        this.parentElement.style.display = 'none';
    }
    //调用公共头部
    $('.su_head').load('head.html');
    $(document).ready(function () {
        //获取导航栏
        $.ajax({
            type: 'get',
            url: '/ayuancity/categorys/getcategoryAndtype',
            success: function (res) {
                // console.log( $('.su_nav').text())
                for (let i = 0; i < res.content.data.length; i++) {

                    let nav = res.content.data[i];
                    var category =
                        `
							<li id="${nav.categoryName}" class="${nav.categoryName}" >
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
                    var drop = '';
                    var type = '';
                    if (nav.types.length > 0) {
                        drop = ` <ul class="dropdown "  >`
                        for (let j = 0; j < nav.types.length; j++) {
                            type = type + `<li><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

                        }
                        type = type + `</ul>`
                    }
                    var template = category + drop + type + ` </li>`;
                    $('.su_nav').append(template);

                }

                let url = location.href;
                let categoryName = new URL(url).searchParams.get('categoryName');
                    $('.' + categoryName).addClass("active")

            }

        });
        //获取信息内容
        //    处理商品
        let url = location.href;
        let infoId = new URL(url).searchParams.get('infoId');
        $.ajax({
            type: 'get',
            url: `/ayuancity/infos/${infoId}`,
            success: function (res) {
                // console.log(res)
                let item=res.content.data
                //图片
                $('#le-goods-url').attr("src",item.infoImg);
                //价格
                $('#le-goods-price').html(item.infoPrice);
                //标题
                $('#le-goods-title').html(item.infoTitle);
                //地址
                $('#address').html(item.infoAddress);
                // 如果不是交易，则把一些内容隐藏
                if (item.categoryName.indexOf("二手")==-1){
                    //关广告
                    document.getElementsByClassName("le-top-ad")[0].style.display = 'none';
                    //价格改薪资
                    $('#jiage').html("薪资");
                    $('#peisongzhi').html("工作地点");
                    // console.log(item.categoryName.indexOf("交易"))
                    $('#infoContent3').addClass("hidden");
                    $('.supporttitle').addClass("hidden");
                    $('#infoContent1').removeClass("hidden");
                    $('#infoContent2').html(item.infoContent);
                    $('#deliverytitle').addClass("hidden");
                    $('#deliverytime').html("分类信息");
                    $('#deliverycontent').html(item.categoryName+'-'+item.typeName);
                }
            }

        });

        // 判断是否登录 已登录 显示昵称
        let citytoken = sessionStorage.getItem('citytoken');
        if (citytoken) {
            $.ajax({
                type: 'GET',
                url: '/city/user/info',
                data: {
                    token: citytoken
                },
                success: function (json) {
                    if (json.success) {
                        let username = json.content.user.userName;

                        sessionStorage.setItem('userId',json.content.user.userId);
                        // console.log(json)
                        $('#yuan-login').html(username);
                        // $('#user-showname').html(showname);
                        $('#yuan-login').attr('data-toggle', 'dropdown');
                        $('#yuan-userImg').removeClass("hidden");
                        $('#yuan-userImg').removeClass("hidden");
                        $('#yuan-userImg').attr("src",json.content.user.userImg);

                        //发布内容
                        $('#nicknamecomment').attr('value',json.content.user.userName );
                        $('#emailcomment').attr('value', json.content.user.userEmail);
                    }
                }
            });
        };



        //获取评论---
        // $.ajax({
        //     type: 'GET',
        //     url: '/ayuancity/comment/infoComment',
        //     data: {
        //         infoId: infoId
        //     }
        // });

        //---


        $("#addressmother").children("select").remove()
        // let adtemplate=` <select id="address"  style="height: 48px;border: 2px solid #c5464a;margin-left: 20px">
        //             <option value="北海">北海</option>
        //             <option value="来宾">来宾</option>
        //             <option value="合浦">合浦</option>
        //             <option value="南宁">南宁</option>
        //             <option value="柳州">柳州</option>
        //         </select>`
        // $("#addressmother").append(adtemplate)

        let adtemplate=  `<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" style="height: 48px;weight:30px;border: 2px solid #c5464a; " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    城市
     <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">北海</a></li>
    <li><a href="#">来宾</a></li>
    <li><a href="#">合浦</a></li>
    <li><a href="#">南宁</a></li>
    <li><a href="#">柳州</a></li>
  </ul>
</div>
        `
        $("#addressmother").append(adtemplate)
        $('.ui.selection.dropdown').dropdown();
    });


    function loginout() {
        $.ajax({
            type: 'POST',
            url: '/city/user/OutLogin',
            success: function (json) {
                if (json.success) {
                    sessionStorage.removeItem('citytoken');
                    alert("欢迎下次登录")
                    location.href = 'index.html';
                }
            }
        });
    }

        function xz1() {
            document.getElementById("plun").style.display = "block";
            document.getElementById("fuwu").style.display = "none";
            document.getElementById("baozhang").style.display = "none";
            let a = document.getElementById("switch");
            // h1[0].innerText="累计评价";
            // p1[0].innerText="";

        }

        function xz2() {

            document.getElementById("plun").style.display = "none";
            document.getElementById("baozhang").style.display = "none";
            document.getElementById("fuwu").style.display = "block";
            // let a=document.getElementById("switch");
            // let  h1=a.getElementsByTagName('h5');
            // let  p1 =a.getElementsByTagName('p');
            // h1[0].innerText="服务详情";
        }

        function xz3() {

            document.getElementById("plun").style.display = "none";
            document.getElementById("fuwu").style.display = "none";
            let a = document.getElementById("switch");
            document.getElementById("baozhang").style.display = "block";
        }

</script>


<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script >
    //评论表单验证
    // $('.ui.form').form({
    //     fields: {
    //         title: {
    //             identifier: 'content',
    //             rules: [{
    //                 type: 'empty',
    //                 prompt: '请输入评论内容'
    //             }
    //             ]
    //         },
    //         content: {
    //             identifier: 'nickname',
    //             rules: [{
    //                 type: 'empty',
    //                 prompt: '请输入你的大名'
    //             }]
    //         },
    //         type: {
    //             identifier: 'email',
    //             rules: [{
    //                 type: 'email',
    //                 prompt: '请填写正确的邮箱地址'
    //             }]
    //         }
    //     }
    // });


    $(function () {
        let url = location.href;
        let infoId = new URL(url).searchParams.get('infoId');
        $("#comment-container").load("/ayuancity/comment/infoComment/"+infoId);
    });

    $('#commentpost-btn').click(function () {
        // var boo = $('.ui.form').form('validate form');
        // if (boo) {
        //     console.log('校验成功');
            postData();
        // } else {
        //     console.log('校验失败');
        // }
    });

    function postData() {
        let url = location.href;
        let infoId = new URL(url).searchParams.get('infoId');
        $("#comment-container").load("/ayuancity/comment/AddinfoComment",{
            "parentComment.id" : $("[name='parentComment.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "email"   : $("[name='email']").val(),
            "content" : $("[name='content']").val(),
            "avatar" : $("#yuan-userImg").attr('src'),
            "infoId" :infoId
        },function (responseTxt, statusTxt, xhr) {
            // $(window).scrollTo($('#goto'),0);
            clearContent();
        });
    }

    function clearContent() {
        $("[name='nickname']").val('');
        $("[name='email']").val('');
        $("[name='content']").val('');
        $("[name='parentComment.id']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息...");
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[name='parentComment.id']").val(commentId);
        $(window).scrollTo($('#comment-form'),500);
    }

    function addcart() {
        //是否登录
        let userId = sessionStorage.getItem('userId');
        if (userId) {
            let url = location.href;
            let infosId = new URL(url).searchParams.get('infoId');
            $.ajax({
                type: 'GET',
                url: `/ayuancity/carts/addCart/${userId}/${infosId}`,
                success: function (res) {
                    alert(res.message)
                }
            })
        }else{
            alert("请先登录")
        }

    }

   function buyInfos(){
       //是否登录
       let userId = sessionStorage.getItem('userId');
       if (userId) {
           let url = location.href;
           let infosId = new URL(url).searchParams.get('infoId');

           // $.ajax({
           //     type: 'GET',
           //     url: `/city/v1/pay/alipay`,
           //     data: {
           //         infoId: infosId,
           //         infoPrice: $("#le-goods-price").val(),
           //     },
           //     success: function (res) {
           //         // alert(res)
           //         const div = document.createElement('div');
           //         div.innerHTML = res; // html code
           //         document.body.appendChild(div);
           //     }
           // })
           let price=$("#le-goods-price").html()
           location.href="/city/v1/pay/alipay?infoId="+infosId+"&infoPrice="+price+"&userId="+userId;
       }else{
           alert("请先登录")
       }
    }


    function searinfo() {
      //TODO:携带内容放回到itemsPage.html
        alert("暂无该内容")
    }

</script>
<!-- Js Plugins -->
<script src="../js/main.js"></script>
</html>